<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务管理 - 业务列表</title>
    <link rel="stylesheet" href="../../css/style.css">
        <style>
            .stats-card {
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                padding: 20px;
                margin-bottom: 20px;
            }
            .stats-container {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 20px;
                margin-top: 15px;
            }
            .stat-item {
                background-color: #f8f9fa;
                padding: 15px;
                border-radius: 6px;
                text-align: center;
            }
            .stat-label {
                font-size: 14px;
                color: #6c757d;
                margin-bottom: 5px;
            }
            .stat-value {
                font-size: 24px;
                font-weight: bold;
                color: #2d3436;
            }
        </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../../js/utils.js"></script>
    <script src="../../js/api.js"></script>
    <script type="module" src="../../js/components/navigation.js"></script>
</head>
<body>
    <div class="app-container">
        <header class="app-header">
            <div class="logo">员工管理系统</div>
            <div class="user-info">
                <span id="username-display"></span>
                <button id="logout-btn" class="btn btn-secondary">退出登录</button>
            </div>
        </header>

        <div class="app-body">
            <aside class="sidebar">
                <nav class="menu">
                    <ul>
                        <li><a href="#" class="menu-item active" data-target="welcome">欢迎页</a></li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">员工管理</a>
                            <ul class="submenu">
                                <li><a href="../employee/list.html" class="submenu-item">员工列表</a></li>
                                <li><a href="../employee/add.html" class="submenu-item">添加员工</a></li>
                            </ul>
                        </li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">业务管理</a>
                            <ul class="submenu">
                                <li><a href="../business/list.html" class="submenu-item">业务列表</a></li>
                                <li><a href="../business/create.html" class="submenu-item">创建业务</a></li>
                            </ul>
                        </li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">薪酬管理</a>
                            <ul class="submenu">
                                <li><a href="../salary/overview.html" class="submenu-item">薪酬概览</a></li>
                                <li><a href="../salary/manage.html" class="submenu-item">薪酬管理</a></li>
                            </ul>
                        </li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">系统设置</a>
                            <ul class="submenu">
                                <li><a href="../system/user.html" class="submenu-item">用户管理</a></li>
                                <li><a href="../system/profile.html" class="submenu-item">个人设置</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </aside>

            <main class="content">
                <!-- 统计报表模块 -->
                <div class="stats-card">
                    <div class="card-header">
                        <h2 class="card-title">业务统计报表</h2>
                    </div>
                    <div class="stats-container">
                        <div class="stat-item">
                            <div class="stat-label">总业务数</div>
                            <div class="stat-value" id="total-businesses">0</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">总收入</div>
                            <div class="stat-value" id="total-revenue">¥0.00</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">已完成业务</div>
                            <div class="stat-value" id="completed-businesses">0</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">进行中业务</div>
                            <div class="stat-value" id="active-businesses">0</div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">业务列表</h2>
                        <a href="create.html" class="btn btn-primary">创建业务</a>
                    </div>
                    <div class="search-container">
                        <input type="text" id="search-input" class="search-input" placeholder="请输入业务名称">
                        <button id="search-btn" class="search-btn">搜索</button>
                    </div>
                    <div class="table-container">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>业务名称</th>
                                    <th>开始日期</th>
                                    <th>结束日期</th>
                                    <th>状态</th>
                                    <th>收入</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="business-table-body">
                                <!-- 业务数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                    <div class="pagination">
                        <span class="pagination-item">上一页</span>
                        <span class="pagination-item active">1</span>
                        <span class="pagination-item">2</span>
                        <span class="pagination-item">3</span>
                        <span class="pagination-item">下一页</span>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 检查登录状态
            checkLoginStatus();

            // 显示用户名
            const username = localStorage.getItem('username');
            if (username) {
                $('#username-display').text(username);
            }

            // 退出登录
            $('#logout-btn').click(function() {
                localStorage.removeItem('token');
                localStorage.removeItem('username');
                window.location.href = '../../index.html';
            });

            // 加载统计数据和业务列表
            loadBusinessStats();
            loadBusinessList();

            // 搜索按钮点击事件
            $('#search-btn').click(function() {
                loadBusinessList();
            });

            // 按下回车键搜索
            $('#search-input').keypress(function(e) {
                if (e.which === 13) {
                    loadBusinessList();
                }
            });

            function checkLoginStatus() {
                const token = localStorage.getItem('token');
                if (!token) {
                    window.location.href = '../../index.html';
                }
            }

            function loadBusinessStats() {
            // 显示加载中
            document.getElementById('total-businesses').textContent = '加载中...';
            document.getElementById('total-revenue').textContent = '加载中...';
            document.getElementById('completed-businesses').textContent = '加载中...';
            document.getElementById('active-businesses').textContent = '加载中...';

            // 获取业务数据并计算统计信息
            window.api.business.getList({}) 
                .then(data => {
                    if (!data || !data.data || data.data.length === 0) {
                        document.getElementById('total-businesses').textContent = '0';
                        document.getElementById('total-revenue').textContent = '¥0.00';
                        document.getElementById('completed-businesses').textContent = '0';
                        document.getElementById('active-businesses').textContent = '0';
                        return;
                    }

                    const businesses = data.data;
                    const total = businesses.length;
                    let revenue = 0;
                    let completed = 0;
                    let active = 0;

                    businesses.forEach(business => {
                        revenue += business.revenue;
                        if (business.status === '已完成') completed++;
                        if (business.status === '进行中') active++;
                    });

                    // 更新统计数据
                    document.getElementById('total-businesses').textContent = total;
                    document.getElementById('total-revenue').textContent = Formatter.formatMoney(revenue);
                    document.getElementById('completed-businesses').textContent = completed;
                    document.getElementById('active-businesses').textContent = active;
                })
                .catch(error => {
                    console.error('Failed to load business stats:', error);
                    document.getElementById('total-businesses').textContent = '加载失败';
                    document.getElementById('total-revenue').textContent = '加载失败';
                    document.getElementById('completed-businesses').textContent = '加载失败';
                    document.getElementById('active-businesses').textContent = '加载失败';
                });
        }

        function loadBusinessList() {
                const searchKeyword = $('#search-input').val().trim();

                // 显示加载中
                $('#business-table-body').html('<tr><td colspan="7" style="text-align: center;">加载中...</td></tr>');

                // 调用API获取业务列表
                window.api.business.getList({ keyword: searchKeyword })
                    .then(data => {
                        // 清空表格
                        $('#business-table-body').empty();

                        // 检查数据
                        if (!data || !data.data || data.data.length === 0) {
                            $('#business-table-body').html('<tr><td colspan="7" style="text-align: center;">暂无数据</td></tr>');
                            return;
                        }

                        // 填充表格
                        data.data.forEach(business => {
                            const row = $('<tr></tr>');
                            row.append(`<td>${business.id}</td>`);
                            row.append(`<td>${business.name}</td>`);
                            row.append(`<td>${Formatter.formatDate(business.startDate)}</td>`);
                            row.append(`<td>${Formatter.formatDate(business.endDate)}</td>`);

                            // 状态标签
                            let statusTag = '';
                            if (business.status === '已完成') {
                                statusTag = '<span class="tag tag-success">已完成</span>';
                            } else if (business.status === '进行中') {
                                statusTag = '<span class="tag tag-warning">进行中</span>';
                            } else {
                                statusTag = '<span class="tag tag-info">${business.status}</span>';
                            }
                            row.append(`<td>${statusTag}</td>`);

                            row.append(`<td>${Formatter.formatMoney(business.revenue)}</td>`);
                            row.append(`
                                <td>
                                    <a href="update.html?id=${business.id}" class="btn btn-primary">编辑</a>

                                </td>
                            `);
                            $('#business-table-body').append(row);
                        });
                    })
                    .catch(error => {
                        console.error('Failed to load business list:', error);
                        $('#business-table-body').html('<tr><td colspan="7" style="text-align: center;">加载失败，请重试</td></tr>');
                    });
            }
        });
    </script>
</body>
</html>